<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>

    <!-- bootstrap -->
    <link href="__CSS__/bootstrap/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="__CSS__/login.css">

    <style>
        #msg{
            background: rgba(255,255,255,0.6);
            border:1px solid #faf2cc;
            text-align:center;
            min-width: 100px;
            max-width: 160px;
            height: 30px;
            margin-left: 45%;
            border-radius: 3px;
            background-color: white;
            color: black;
        }
        .forhid{
            display: none;
        }
    </style>
</head>

<body>
<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">
            <div class="row">
                <!--提示框-->
                <div id="msg">
                    <img src="__IMG__/success.png" id="img" alt="" style="float: left;height: 29px;width: 36px;">
                    <span id="sp" style="font-size: 14px;line-height: 30px;">提示信息</span>
                </div>

                <div class="col-sm-8 col-sm-offset-2 text">
                    <img style='width:200px;' src="__IMG__/logo.png" alt="">
                    <div class="description">
                        <p>
                            HANGZHOU LAISON TECHNOLOGY CO.,LTD.
                        </p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3 form-box">
                    <div class="form-top">
                        <div class="form-top-left" style="text-align: center;margin-left: 40px;">
                            <h3>订单管理与审核系统</h3>
                        </div>
                    </div>
                    <div class="form-bottom">
                        <form class="login-form" method="post" action="{:url('Login/login')}">
                            <div class="form-group">
                                <input type="text" name="username" placeholder="用户名" class="form-username form-control" id="form-username">
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" placeholder="密码" class="form-password form-control" autocomplete="new-password" id="form-password">
                            </div>
                            <div class="form-group formpin">
                                <input type="text" name="code" placeholder="验证码" class="form-pin form-control" id="form-pin">
                                <img class='pinimg' src="{:url('Login/verify')}" onclick="JavaScript:this.src='{:url('Login/verify')}?tm='+Math.random();"/>
                            </div>
                            <button type="submit" class="btn">登录</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="__JS__/jquery.js"></script>
<script>

    $("#msg").addClass('forhid')
    function login() {
        var username = $("input[name='username']").val()
        var password = $("input[name='password']").val()
        var code = $("input[name='code']").val()
        var data = {'username':username,'password':password,'code':code}
        //console.log(data)
        var submitBtn = document.getElementsByClassName("btn")

        submitBtn.onclick = function (event) {
            alert("preventDefault!");
            var event = event || window.event;
            event.preventDefault(); // 兼容标准浏览器
            window.event.returnValue = false; // 兼容IE6~8
        };

        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            //async: false,  //设置为同步
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('Login/login')}",//url
            data: data,
            success: function (result) {
                var code = result.code;
                var msg = result.msg;

                if(code != 1){
                    $('#sp').text(msg)
                    $('#img').attr('src', '__IMG__/fail.png')
                    $("#msg").removeClass('forhid')
                }else{
                    //成功登录首页
                    location.href="{:url('Index/index')}";
                }

            },
            error:function (result) {
                alert('服务器错误')

            }
        });

    }

</script>
</html>